<template>
    <div>
    <div class="box-a"></div>
    </div>
</template>
<script>
export default{};
</script>
<style scoped>
.box-a{
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: myframe 3s infinite;
    border-radius:50px ;
}
@keyframes myframe{
    0%{
        background: red;
        left: 0px;
        top:0px;
    }
     25%{
        background: yellow;
        left: 200px;
        top:0px;
     }
       50%{
        background: blue;
        left: 200px;
        top:200px;
     }
       75%{
        background: green;
        left: 0px;
        top:200px;
     }
       100%{
        background: red;
        left: 0px;
        top:0px;
     }
}

</style>